<template>
  <view class="page">
    <Nav title="我的田间试验"></Nav>
    <view class="main-wrapper">
      <view v-if="false">
        <view class="action-wrapper">
          <view class="action-wrapper-title">试验步骤</view>
          <view class="action-wrapper-main">
            <view
              v-for="(item, index) in actionTabs"
              :key="{ index }"
              class="action-wrapper-item"
            >
              <view class="action-wrapper-item-icon">
                <image
                  class="action-wrapper-item-icon-pic"
                  :src="item.pic"
                  mode="widthFix"
                ></image>
              </view>
              <view class="action-wrapper-item-text">{{ item.name }}</view>
            </view>
          </view>
        </view>
        <view class="emtpy">
          <image
            class="emtpy-pic"
            :src="require('@/static/img/emtpy.png')"
            mode="widthFix"
          ></image>
          <view class="emtpy-text">你还没有创建试验</view>
          <view class="emtpy-text">点击下边“创建试验”，立即创建</view>
        </view>
      </view>
      <!-- {/* 我的实验记录 */} -->
      <view v-if="true" class="records-wrapper">
        <view class="records-wrapper-mudi">
          <view class="records-wrapper-mudi-text">
            试验目的 - {{ "橘子实验" }}。
          </view>
          <view class="records-wrapper-mudi-text2">
            【试验地块】：{{ "自填的文案" }}
          </view>
          <view class="records-wrapper-mudi-text2">
            【试验地块】：{{ "自填的文案" }}
          </view>
          <button class="records-wrapper-mudi-more-btn">
            <text class="records-wrapper-mudi-more-btn-text"> 查看更多 </text>
            <image
              mode="widthFix"
              :src="require('@/static/img/arrows-mini-bottom.png')"
              class="records-wrapper-mudi-more-btn-icon"
            ></image>
          </button>
        </view>
        <view class="records-wrapper-main">
          <!-- {/* 试验过程 */} -->
          <view
            class="records-wrapper-main-item"
            style="border-bottom: 2px solid #e9e9e9"
          >
            <view class="records-wrapper-main-title">
              <view class="records-wrapper-main-title-icon"></view>
              试验过程
            </view>
            <view
              class="records-wrapper-main-detail"
              @click="gotoPage('/pages/experiment/process')"
            >
              <view>
                已添加
                <text style="color: #4fb718; margin: 0 10rpx">1</text
                >条试验过程</view
              >

              <view style="display: flex; align-items: center"
                >详情
                <u-icon name="arrow-right" style="margin-left: 15rpx"></u-icon
              ></view>
            </view>
            <view class="records-wrapper-main-tags">
              <view
                class="records-wrapper-main-tags-item"
                @click="gotoPage('/pages/experiment/add-record')"
              >
                + 药肥记录
              </view>
              <view
                class="records-wrapper-main-tags-item"
                @click="gotoPage('/pages/experiment/add-operat')"
              >
                + 农事操作
              </view>
            </view>
          </view>
          <!-- {/* 试验结论 */} -->
          <view
            class="records-wrapper-main-item"
            style="border-bottom: 2px solid #e9e9e9"
          >
            <view class="records-wrapper-main-title">
              <view class="records-wrapper-main-title-icon"></view>
              试验过程
            </view>
            <view class="records-wrapper-main-detail">
              您还未添加试验过程
              <view style="display: flex; align-items: center"
                >详情
                <u-icon name="arrow-right" style="margin-left: 15rpx"></u-icon
              ></view>
            </view>
            <view class="records-wrapper-main-tags">
              <view
                class="records-wrapper-main-tags-item"
                @click="gotoPage('/pages/experiment/add-result')"
              >
                填写实验结论
              </view>
            </view>
          </view>
          <!-- {/* 试验报告 */} -->
          <view class="records-wrapper-main-item">
            <view class="records-wrapper-main-title">
              <view class="records-wrapper-main-title-icon"></view>
              试验过程
            </view>
            <view class="records-wrapper-main-detail">
              您还未添加试验过程
              <view style="display: flex; align-items: center"
                >详情
                <u-icon name="arrow-right" style="margin-left: 15rpx"></u-icon
              ></view>
            </view>
            <view class="records-wrapper-main-tags"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn" @click="gotoPage('/pages/experiment/add')">
        <text class="btn-text" style="color: #fff"> + 创建试验 </text>
      </button>
    </view>
  </view>
</template>

<script>
import Nav from "@/components/nav.vue";
export default {
  components: {
    Nav,
  },
  data() {
    return {
      actionTabs: [
        {
          pic: require("@/static/img/experiment-icon.png"),
          name: "创建试验",
        },
        {
          pic: require("@/static/img/experiment-icon2.png"),
          name: "添加农事过程",
        },
        {
          pic: require("@/static/img/experiment-icon3.png"),
          name: "试验总结",
          path: "",
        },
        {
          pic: require("@/static/img/experiment-icon4.png"),
          name: "生成试验报告",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    gotoPage(value) {
      uni.navigateTo({
        url: value,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  background: #f6f6f6;
  min-height: 100vh;
}

.main-wrapper {
  position: relative;
  top: -60rpx;
  padding: 0 30rpx;
}
.records-wrapper {
  width: 690rpx;
  border-radius: 11rpx;
  opacity: 1;
  &-mudi {
    padding: 23rpx 20rpx;
    min-height: 335rpx;
    background: #1ac678;
    &-text,
    &-text2 {
      display: flex;
      flex-direction: row;
      font-size: 28rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 18rpx;
    }
    &-text2 {
      font-size: 25rpx;
    }
    &-more-btn {
      width: 207rpx;
      height: 53rpx;
      background: rgba($color: #fff, $alpha: 0.3);
      border-radius: 53rpx 53rpx 53rpx 53rpx;
      margin: 26rpx auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 38rpx;
      &-text {
        font-size: 26rpx;
        color: #fff;
      }
      &-icon {
        width: 11rpx;
      }
    }
  }
  &-main {
    padding: 35rpx;
    background: #fff;
    &-item {
      padding-bottom: 35rpx;
      margin-bottom: 35rpx;
    }
    &-title {
      font-size: 26rpx;
      font-weight: bold;
      color: #202020;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 32rpx;
      &-icon {
        width: 7rpx;
        height: 26rpx;
        background: #1ac678;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin-right: 15rpx;
      }
    }
    &-detail {
      width: 100%;
      height: 88rpx;
      background: #f6f6f6;
      display: flex;
      flex-direction: row;
      padding: 0 20rpx;
      justify-content: space-between;
      align-items: center;
      font-size: 25rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 26rpx;
    }
    &-tags {
      display: flex;
      flex-direction: row;
      padding: 0 30rpx;
      &-item {
        width: 207rpx;
        height: 53rpx;
        border-radius: 11rpx 11rpx 11rpx 11rpx;
        border: 2rpx solid #1ac678;
        font-size: 25rpx;
        font-weight: bold;
        color: #1ac678;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 30rpx;
      }
    }
  }
}
.action-wrapper {
  width: 690rpx;
  background: #ffffff;
  overflow: hidden;
  &-title {
    width: 100%;
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    text-align: center;
    margin: 40rpx 0 44rpx;
  }
  &-main {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;
  }
  &-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    // flex-direction: row;
    // justify-content: center;
    align-items: center;
    &-text {
      width: 90rpx;
      font-size: 21rpx;
      color: #202020;
      text-align: center;
    }
    &-icon {
      width: 90rpx;
      height: 90rpx;
      background: #f6f6f6;
      border-radius: 45rpx;
      margin-bottom: 21rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &-pic {
        display: block;
        width: 35rpx;
      }
    }
  }
}
.emtpy {
  margin-top: 103rpx;
  &-pic {
    display: block;
    width: 206rpx;
    margin: 0 auto 53rpx;
  }
  &-text {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    text-align: center;
  }
}
.btn-box {
  width: 100%;
  margin-top: 80rpx;
  margin-bottom: 108rpx;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
